import React, { Component } from 'react'
import {
  HashRouter as Router,
  Link,
  Switch,
  Route,
  Redirect
} from 'react-router-dom'
import NewsList from './NewsList'
import FoodsList from './FoodsList'
import NewsDetail from './NewsDetail'
import FoodDetail from './FoodDetail'
import NotFound from './NotFound'

export default class Index extends Component {
  render () {
    return (
      <Router>
        <div>Index</div>
        <p>
          <Link to='/newslist'>新闻列表</Link>&nbsp;&nbsp;
          <Link to='/foodslist'>食品列表</Link>
        </p>
        {/* Switch只进入到一个规则里面 */}
        <Switch>
          {/* Route既充当路由出口，又要设置路由规则 */}
          {/* <Route exact path='/' component={NewsList} /> */}
          <Route path='/newslist' component={NewsList} />
          <Route path='/foodslist'>
            <FoodsList />
          </Route>
          {/* 重定向必须要在已有规则的后面 */}
          {/* v5里面，凡是根级路径 / 二级根级路径 /layout/ 都要加精确匹配 exact */}
          <Redirect exact from='/' to='/foodslist' />
          {/* query传参的时候，路由规则，无须特殊处理 ，暂时组件写在component属性后面，否则你可能拿不到值*/}
          {/* <Route path='/newsdetail' component={NewsDetail} /> */}
          <Route path='/newsdetail'>
            <NewsDetail />
          </Route>
          {/* params传参的时候，路由规则，必须要通过动态路径参数进行配置 */}
          <Route path='/fooddetail/:name/:price' component={FoodDetail}>
            {/* 如果你写成children的方式，将来你的子组件中，你的props就没有值 */}
            {/* <FoodDetail /> */}
          </Route>
          {/* v5的404要放在最后 */}
          {/* <Route path='*' component={NotFound} /> */}
          <Route component={NotFound} />
        </Switch>
      </Router>
    )
  }
}
